<template>
  <div id="login">
    <div class="login-form">
      <el-form ref="refLoginForm" :model="form" :rules="rules" label-width="120px" label-position="right">
        <el-form-item>
          <div class="logo"></div>
          <div class="desc">{{ cfg.title }}</div>
        </el-form-item>
        <el-form-item prop="username">
          <el-input placeholder="请填写用户名" :prefix-icon="User" v-model="form.username" clearable />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="请填写密码" :prefix-icon="Key" v-model="form.password" clearable />
        </el-form-item>
        <el-form-item prop="code">
          <el-col :span="14">
            <el-input placeholder="请填写验证码" :prefix-icon="Picture" v-model="form.code" clearable />
          </el-col>
          <el-col :span="8" :offset="2">
            <img :src="store.captcha" class="captcha" alt="" @click="store.refreshCaptcha" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            style="width:100vw"
            @click="handleLogin"
            v-loading.fullscreen.lock="store.loading"
            :loading="store.loading"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { User, Key, Picture } from '@element-plus/icons-vue'
import cfg from '@/config/config'

const store = useUserStore()
const router = useRouter()
const route = useRoute()
const form = reactive({
  username: '',
  password: '',
  code: '',
})
const rules = {
  username: [{required: true, message: '请填写用户名', trigger: 'blur'}],
  password: [{required: true, message: '请填写密码', trigger: 'blur'}],
  code: [{required: true, message: '请填写验证码', trigger: 'blur'}]
}
const refLoginForm = ref()

async function handleLogin() {
  refLoginForm.value.validate(async(valid : boolean) => {
    if (valid) {
      await store.login(form.username, form.password, form.code)
      if (store.isLoggedIn) {
        const redirect = route.query.redirect
        if (redirect) {
          router.push({path: redirect || '/'})
        } else {
          router.push({name: 'home'})
        }
      }
    }
  })
}

onMounted(() => store.refreshCaptcha())
</script>

<style lang="less">
#login{
  width: 100vw;
  height: 100vh;
  background: url(../../assets/image/background.svg);
  background-size: cover;

  .login-form{
    margin: auto;
    width: 550px;
    min-height: 220px;
    padding-top: 150px;
  }
  .logo{
    width: 100vw;
    margin: 0;
    padding: 0;
    border:none;
    background-color: transparent;
    text-align: center;
  }

  .title{
    font-size: 30px !important;
    font-weight: 700 !important;
    margin-left: 20px !important;
    width: 300px;
    display: inline-block !important;
    height: 60px;
    line-height: 60px;
    margin-top: 10px;
    position: absolute;
    text-align: center;
  }

  .desc{
    width: 100vw;
    font-size: 24px;
    text-align: center;
    color: gray;
    height: 60px;
    line-height: 60px;
  }

  .captcha{
    width: 120px;
    height:40px;
  }
}
</style>